<template>
  <div class="research-carrier">
    <h2 class="section-title">科研载体</h2>
    
    <div class="carrier-tabs">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="carrier-tab" 
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.name }}
      </div>
    </div>
    
    <div class="carrier-content">
      <div v-if="activeTab === 0" class="lab-content">
        <div class="lab-item" v-for="(lab, index) in labData" :key="index">
          <div class="lab-image">
            <img :src="lab.image" :alt="lab.name">
          </div>
          <div class="lab-info">
            <h3>{{ lab.name }}</h3>
            <p class="lab-level">{{ lab.level }}</p>
            <p class="lab-desc">{{ lab.description }}</p>
            <div class="lab-achievements">
              <h4>主要研究方向：</h4>
              <ul>
                <li v-for="(direction, idx) in lab.researchDirections" :key="idx">{{ direction }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="activeTab === 1" class="center-content">
        <div class="center-item" v-for="(center, index) in centerData" :key="index">
          <h3>{{ center.name }}</h3>
          <p class="center-year">成立时间: {{ center.year }}</p>
          <p class="center-desc">{{ center.description }}</p>
          <div class="center-focus">
            <h4>研究重点：</h4>
            <p>{{ center.focus }}</p>
          </div>
        </div>
      </div>
      
      <div v-if="activeTab === 2" class="platform-content">
        <div class="platform-item" v-for="(platform, index) in platformData" :key="index">
          <div class="platform-header">
            <span class="platform-icon"><i class="fas fa-laptop-code"></i></span>
            <h3>{{ platform.name }}</h3>
          </div>
          <p class="platform-desc">{{ platform.description }}</p>
          <div class="platform-features">
            <h4>平台特点：</h4>
            <ul>
              <li v-for="(feature, idx) in platform.features" :key="idx">{{ feature }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResearchCarrier',
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: '重点实验室' },
        { name: '工程技术研究中心' },
        { name: '创新平台' }
      ],
      labData: [
        {
          name: '智能交通系统重点实验室',
          level: '省级重点实验室',
          image: 'https://via.placeholder.com/400x250',
          description: '专注于智能交通系统关键技术研究，包括智能信号控制、交通大数据分析、车联网技术等方向，是国内智能交通领域的重要科研基地。',
          researchDirections: [
            '交通信号控制优化算法研究',
            '交通大数据挖掘与应用',
            '车路协同系统开发',
            '智慧交通云平台建设'
          ]
        },
        {
          name: '城市智能交通工程实验室',
          level: '市级重点实验室',
          image: 'https://via.placeholder.com/400x250',
          description: '致力于城市智能交通工程技术研发与应用，为城市交通拥堵治理、智慧交通建设提供技术支撑。',
          researchDirections: [
            '城市交通拥堵预测与控制',
            '公共交通智能化管理',
            '智慧停车系统开发',
            '交通信息服务平台建设'
          ]
        }
      ],
      centerData: [
        {
          name: '智能交通工程技术研究中心',
          year: '2015',
          description: '依托我公司多年在智能交通领域的技术积累，专注于交通信息采集、处理、分析和应用的全套解决方案研发。',
          focus: '重点研发智能信号控制系统、交通流监测与分析技术、交通诱导系统等，已成功应用于多个城市的智能交通建设中。'
        },
        {
          name: '城市交通大数据应用技术研究中心',
          year: '2018',
          description: '融合大数据、云计算和人工智能技术，致力于城市交通大数据应用技术研发。',
          focus: '专注于交通大数据采集、存储、处理与应用技术研究，开发了多款交通大数据分析平台，为城市交通规划、管理和服务提供数据支持。'
        },
        {
          name: '智能网联交通技术研究中心',
          year: '2020',
          description: '围绕车联网、5G通信等新技术在交通领域的应用，开展前沿技术研发。',
          focus: '重点研究车路协同系统、智能网联汽车测试与验证技术、未来交通系统架构等领域，推动交通领域数字化转型。'
        }
      ],
      platformData: [
        {
          name: '交通大数据创新平台',
          description: '整合多源交通数据，构建交通大数据资源池，为科研人员和企业提供数据支持和技术服务。',
          features: [
            '多源交通数据融合能力',
            '大规模数据处理分析能力',
            '交通模型仿真与评估',
            '开放API接口及数据服务'
          ]
        },
        {
          name: '智能交通产学研合作平台',
          description: '联合高校、科研院所和企业力量，搭建产学研合作平台，促进科研成果转化和技术创新。',
          features: [
            '联合实验室建设',
            '研究生联合培养基地',
            '科研成果转化通道',
            '技术创新孵化机制'
          ]
        },
        {
          name: '交通科技创新创业基地',
          description: '为交通领域创新创业团队提供办公空间、技术支持、投融资对接等一站式服务。',
          features: [
            '创新项目孵化',
            '专业技术指导',
            '资本对接服务',
            '创业团队培育'
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.research-carrier {
  padding: 20px 0;
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.carrier-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 2px solid #eaeaea;
}

.carrier-tab {
  padding: 12px 24px;
  color: #555;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  transition: all 0.3s;
}

.carrier-tab:hover {
  color: #0056b3;
}

.carrier-tab.active {
  color: #0056b3;
  font-weight: 500;
}

.carrier-tab.active:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0056b3;
}

.carrier-content {
  min-height: 500px;
}

/* Lab Content Styles */
.lab-item {
  display: flex;
  margin-bottom: 40px;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
}

.lab-image {
  flex: 0 0 40%;
}

.lab-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-info {
  flex: 1;
  padding: 20px;
}

.lab-info h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.lab-level {
  font-size: 14px;
  color: #0056b3;
  margin-bottom: 15px;
  font-weight: 500;
}

.lab-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.lab-achievements h4 {
  font-size: 16px;
  color: #444;
  margin-bottom: 10px;
}

.lab-achievements ul {
  padding-left: 20px;
}

.lab-achievements li {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  line-height: 1.5;
}

/* Center Content Styles */
.center-item {
  padding: 25px;
  margin-bottom: 25px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.center-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.center-item h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.center-year {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.center-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.center-focus h4 {
  font-size: 15px;
  color: #444;
  margin-bottom: 10px;
}

.center-focus p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Platform Content Styles */
.platform-item {
  padding: 25px;
  margin-bottom: 25px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #0056b3;
}

.platform-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.platform-icon {
  font-size: 20px;
  color: #0056b3;
  margin-right: 10px;
}

.platform-header h3 {
  font-size: 18px;
  color: #333;
}

.platform-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.platform-features h4 {
  font-size: 15px;
  color: #444;
  margin-bottom: 10px;
}

.platform-features ul {
  padding-left: 20px;
}

.platform-features li {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .carrier-tabs {
    flex-direction: column;
  }
  
  .lab-item {
    flex-direction: column;
  }
  
  .lab-image {
    flex: 0 0 200px;
  }
}
</style> 